<div class="tlp-alert-danger" ng-if="planning.getRestError().rest_error_occured" translate>
    A server error has occured. <b>You should refresh this page</b>.
</div>
<div class="tlp-alert-danger" ng-if="planning.getRestError().rest_error_occured" ng-bind-html="planning.getRestError().rest_error"></div>

<success-message></success-message>

<div class="tuleap-modal-loading" ng-if="planning.loading_modal.loading"></div>

<div class="planning-view" ng-class="{ 'multi-selected-backlog-items': planning.getNumberOfSelectedBacklogItem() > 0 }">
    <div backlog class="planning-backlog"></div>

    <div class="planning-divider">
        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="46" viewBox="0 0 22 46">
            <path class="planning-arrows" fill-rule="evenodd" d="M46.7687388,91.3004832 L39.062769,99.006453 C38.8031339,99.2660881 38.3877177,99.2660881 38.1280826,99.006453 L36.4041055,97.2824759 C36.1444704,97.0228408 36.1444704,96.6074247 36.4041055,96.3477896 L41.9187551,90.83314 L36.4041055,85.3184904 C36.1444704,85.0588553 36.1444704,84.6434392 36.4041055,84.3838041 L38.1280826,82.659827 C38.3877177,82.4001919 38.8031339,82.4001919 39.062769,82.659827 L46.7687388,90.3657968 C47.0283739,90.6254319 47.0283739,91.0408481 46.7687388,91.3004832 Z M36.4818847,90.9109176 L31.8067479,95.5860544 C31.6492298,95.7435725 31.3972009,95.7435725 31.2396828,95.5860544 L30.1937627,94.5401343 C30.0362446,94.3826162 30.0362446,94.1305873 30.1937627,93.9730692 L33.5394469,90.627385 L30.1937627,87.2817009 C30.0362446,87.1241828 30.0362446,86.8721539 30.1937627,86.7146358 L31.2396828,85.6687157 C31.3972009,85.5111976 31.6492298,85.5111976 31.8067479,85.6687157 L36.4818847,90.3438525 C36.6394028,90.5013706 36.6394028,90.7533995 36.4818847,90.9109176 Z M28.0837813,90.668696 L25.833311,92.9191664 C25.7574865,92.9949909 25.6361673,92.9949909 25.5603429,92.9191664 L25.0568684,92.4156919 C24.9810439,92.3398674 24.9810439,92.2185483 25.0568684,92.1427238 L26.6673802,90.532212 L25.0568684,88.9217002 C24.9810439,88.8458757 24.9810439,88.7245565 25.0568684,88.6487321 L25.5603429,88.1452576 C25.6361673,88.0694331 25.7574865,88.0694331 25.833311,88.1452576 L28.0837813,90.3957279 C28.1596058,90.4715524 28.1596058,90.5928716 28.0837813,90.668696 Z M25.1947263,119.300483 C24.9350912,119.040848 24.9350912,118.625432 25.1947263,118.365797 L32.9006961,110.659827 C33.1603312,110.400192 33.5757474,110.400192 33.8353825,110.659827 L35.5593596,112.383804 C35.8189947,112.643439 35.8189947,113.058855 35.5593596,113.31849 L30.04471,118.83314 L35.5593596,124.34779 C35.8189947,124.607425 35.8189947,125.022841 35.5593596,125.282476 L33.8353825,127.006453 C33.5757474,127.266088 33.1603312,127.266088 32.9006961,127.006453 L25.1947263,119.300483 Z M35.4815804,118.910918 C35.3240623,118.7534 35.3240623,118.501371 35.4815804,118.343852 L40.1567172,113.668716 C40.3142353,113.511198 40.5662642,113.511198 40.7237823,113.668716 L41.7697024,114.714636 C41.9272205,114.872154 41.9272205,115.124183 41.7697024,115.281701 L38.4240183,118.627385 L41.7697024,121.973069 C41.9272205,122.130587 41.9272205,122.382616 41.7697024,122.540134 L40.7237823,123.586054 C40.5662642,123.743572 40.3142353,123.743572 40.1567172,123.586054 L35.4815804,118.910918 Z M43.8796838,118.668696 C43.8038593,118.592872 43.8038593,118.471552 43.8796838,118.395728 L46.1301542,116.145258 C46.2059786,116.069433 46.3272978,116.069433 46.4031223,116.145258 L46.9065968,116.648732 C46.9824213,116.724557 46.9824213,116.845876 46.9065968,116.9217 L45.296085,118.532212 L46.9065968,120.142724 C46.9824213,120.218548 46.9824213,120.339867 46.9065968,120.415692 L46.4031223,120.919166 C46.3272978,120.994991 46.2059786,120.994991 46.1301542,120.919166 L43.8796838,118.668696 Z" transform="translate(-25 -82)"/>
        </svg>
    </div>

    <div class="planning-planned">
        <div class="planning-header">
            <h2 class="planning-header-title" translate>Milestones</h2>

            <button ng-if="planning.backlog.submilestone_type  && planning.backlog.user_can_move_cards"
                type="button"
                class="tlp-button-primary tlp-button-outline tlp-button-small planned-header-add-button"
                ng-click="planning.showAddSubmilestoneModal($event, planning.backlog.submilestone_type)"
            >
                <i class="fa fa-plus tlp-button-icon"></i> <span translate>Add {{ planning.backlog.submilestone_type.label }}</span>
            </button>

            <div class="planning-header-spacer"></div>

            <div class="tlp-button-bar planning-header-view-toggler {">
                <div class="tlp-button-bar-item" title="{{::'Compact view' | translate }}">
                    <input type="radio"
                        id="planning-header-compact-toggler"
                        class="tlp-button-bar-checkbox"
                        ng-change="planning.switchViewMode(planning.compact_view_key)"
                        ng-model="planning.current_view_class"
                        ng-value="planning.compact_view_key"
                    >
                    <label for="planning-header-compact-toggler"
                        class="tlp-button-secondary tlp-button-outline tlp-button-small"
                        title="{{::'Compact view' | translate }}"
                    >
                        <i class="fa fa-list"></i>
                    </label>
                </div>
                <div class="tlp-button-bar-item" title="{{::'Detailed view' | translate }}">
                    <input type="radio"
                        id="planning-header-detailed-toggler"
                        class="tlp-button-bar-checkbox"
                        ng-change="planning.switchViewMode(planning.detailed_view_key)"
                        ng-model="planning.current_view_class"
                        ng-value="planning.detailed_view_key"
                    >
                    <label for="planning-header-detailed-toggler"
                        class="tlp-button-secondary tlp-button-outline tlp-button-small"
                        title="{{::'Detailed view' | translate }}"
                    >
                        <i class="fa fa-th-list"></i>
                    </label>
                </div>
            </div>

            <div class="tlp-button-bar"
                ng-if="planning.milestones.content.length > 0"
            >
                <div class="tlp-button-bar-item" title="{{::'Show closed backlog items' | translate }}">
                    <input type="radio"
                        id="planning-header-closed-toggler"
                        class="tlp-button-bar-checkbox"
                        ng-change="planning.switchClosedMilestoneItemsViewMode(planning.show_closed_view_key)"
                        ng-model="planning.current_closed_view_class"
                        ng-value="planning.show_closed_view_key"
                    >
                    <label for="planning-header-closed-toggler"
                        class="tlp-button-secondary tlp-button-outline tlp-button-small"
                        title="{{::'Show closed backlog items' | translate }}"
                    >
                        <i class="fa fa-eye"></i>
                    </label>
                </div>
                <div class="tlp-button-bar-item" title="{{::'Hide closed backlog items' | translate }}">
                    <input type="radio"
                        id="planning-header-opened-toggler"
                        class="tlp-button-bar-checkbox"
                        ng-change="planning.switchClosedMilestoneItemsViewMode(planning.hide_closed_view_key)"
                        ng-model="planning.current_closed_view_class"
                        ng-value="planning.hide_closed_view_key"
                    >
                    <label for="planning-header-opened-toggler"
                        class="tlp-button-secondary tlp-button-outline tlp-button-small"
                        title="{{::'Hide closed backlog items' | translate }}"
                    >
                        <i class="fa fa-eye-slash"></i>
                    </label>
                </div>
            </div>
        </div>

        <div class="tlp-alert-warning" ng-if="planning.displayUserCantPrioritizeForMilestones()" translate>
            You are not allowed to rank on this planning
        </div>

        <div class="no-open-milestones" ng-if="! planning.thereAreOpenMilestonesLoaded() && planning.milestones.open_milestones_fully_loaded">
            <svg class="no-milestone-image" xmlns="http://www.w3.org/2000/svg" width="179" height="40" viewBox="0 0 179 40">
                <path d="M162,119 L146.995507,119 C145.341134,119 144,117.663957 144,115.999878 L144,103.000122 C144,101.3432 145.342468,100 146.995507,100 L180.004493,100 C181.658866,100 183,101.336043 183,103.000122 L183,115.999878 C183,117.6568 181.657532,119 180.004493,119 L165,119 L165,132 L197,132 L197,126 L204,133 L197,140 L197,134 L25,134 L25,132 L57,132 L57,119 L41.995507,119 C40.3411342,119 39,117.663957 39,115.999878 L39,103.000122 C39,101.3432 40.3424683,100 41.995507,100 L75.004493,100 C76.6588658,100 78,101.336043 78,103.000122 L78,115.999878 C78,117.6568 76.6575317,119 75.004493,119 L60,119 L60,132 L109,132 L109,119 L93.995507,119 C92.3411342,119 91,117.663957 91,115.999878 L91,103.000122 C91,101.3432 92.3424683,100 93.995507,100 L127.004493,100 C128.658866,100 130,101.336043 130,103.000122 L130,115.999878 C130,117.6568 128.657532,119 127.004493,119 L112,119 L112,132 L162,132 L162,119 Z M41,103.000122 L41,115.999878 C41,116.556866 41.4431823,117 41.995507,117 L75.004493,117 C75.5528711,117 76,116.55232 76,115.999878 L76,103.000122 C76,102.443134 75.5568177,102 75.004493,102 L41.995507,102 C41.4471289,102 41,102.44768 41,103.000122 Z M93,103.000122 L93,115.999878 C93,116.556866 93.4431823,117 93.995507,117 L127.004493,117 C127.552871,117 128,116.55232 128,115.999878 L128,103.000122 C128,102.443134 127.556818,102 127.004493,102 L93.995507,102 C93.4471289,102 93,102.44768 93,103.000122 Z M146,103.000122 L146,115.999878 C146,116.556866 146.443182,117 146.995507,117 L180.004493,117 C180.552871,117 181,116.55232 181,115.999878 L181,103.000122 C181,102.443134 180.556818,102 180.004493,102 L146.995507,102 C146.447129,102 146,102.44768 146,103.000122 Z M58.5,111 C57.6715729,111 57,110.328427 57,109.5 C57,108.671573 57.6715729,108 58.5,108 C59.3284271,108 60,108.671573 60,109.5 C60,110.328427 59.3284271,111 58.5,111 Z M52.5,111 C51.6715729,111 51,110.328427 51,109.5 C51,108.671573 51.6715729,108 52.5,108 C53.3284271,108 54,108.671573 54,109.5 C54,110.328427 53.3284271,111 52.5,111 Z M64.5,111 C63.6715729,111 63,110.328427 63,109.5 C63,108.671573 63.6715729,108 64.5,108 C65.3284271,108 66,108.671573 66,109.5 C66,110.328427 65.3284271,111 64.5,111 Z M110.5,111 C109.671573,111 109,110.328427 109,109.5 C109,108.671573 109.671573,108 110.5,108 C111.328427,108 112,108.671573 112,109.5 C112,110.328427 111.328427,111 110.5,111 Z M104.5,111 C103.671573,111 103,110.328427 103,109.5 C103,108.671573 103.671573,108 104.5,108 C105.328427,108 106,108.671573 106,109.5 C106,110.328427 105.328427,111 104.5,111 Z M116.5,111 C115.671573,111 115,110.328427 115,109.5 C115,108.671573 115.671573,108 116.5,108 C117.328427,108 118,108.671573 118,109.5 C118,110.328427 117.328427,111 116.5,111 Z M163.5,111 C162.671573,111 162,110.328427 162,109.5 C162,108.671573 162.671573,108 163.5,108 C164.328427,108 165,108.671573 165,109.5 C165,110.328427 164.328427,111 163.5,111 Z M157.5,111 C156.671573,111 156,110.328427 156,109.5 C156,108.671573 156.671573,108 157.5,108 C158.328427,108 159,108.671573 159,109.5 C159,110.328427 158.328427,111 157.5,111 Z M169.5,111 C168.671573,111 168,110.328427 168,109.5 C168,108.671573 168.671573,108 169.5,108 C170.328427,108 171,108.671573 171,109.5 C171,110.328427 170.328427,111 169.5,111 Z" transform="translate(-25 -100)"/>
            </svg>

            <span translate>There are no open milestones</span>
        </div>
        <section class="tlp-pane milestone"
            ng-repeat="milestone in planning.getOpenMilestones() track by milestone.id"
            ng-class="{ collapsed: milestone.collapsed }"
            milestone
        ></section>

        <div ng-if="planning.thereAreClosedMilestonesLoaded() || (! planning.thereAreClosedMilestonesLoaded() && planning.milestones.closed_milestones_fully_loaded)" class="milestones-separator">
            <span translate>Closed milestones are below</span>
        </div>

        <div class="milestones-load-closed">
            <a href=""
                ng-if="! planning.thereAreClosedMilestonesLoaded() && ! planning.milestones.loading && ! planning.milestones.closed_milestones_fully_loaded"
                ng-click="planning.displayClosedMilestones()"
                class="milestones-load-closed-link"
                translate
            >Load closed milestones</a>
        </div>

        <div class="no-closed-milestones" ng-if="! planning.thereAreClosedMilestonesLoaded() && planning.milestones.closed_milestones_fully_loaded">
            <svg class="no-milestone-image" xmlns="http://www.w3.org/2000/svg" width="179" height="40" viewBox="0 0 179 40">
                <path d="M162,41 L146.995507,41 C145.341134,41 144,39.6639569 144,37.9998779 L144,25.0001221 C144,23.3432004 145.342468,22 146.995507,22 L180.004493,22 C181.658866,22 183,23.3360431 183,25.0001221 L183,37.9998779 C183,39.6567996 181.657532,41 180.004493,41 L165,41 L165,54 L197,54 L197,48 L204,55 L197,62 L197,56 L25,56 L25,54 L57,54 L57,41 L41.995507,41 C40.3411342,41 39,39.6639569 39,37.9998779 L39,25.0001221 C39,23.3432004 40.3424683,22 41.995507,22 L75.004493,22 C76.6588658,22 78,23.3360431 78,25.0001221 L78,37.9998779 C78,39.6567996 76.6575317,41 75.004493,41 L60,41 L60,54 L109,54 L109,41 L93.995507,41 C92.3411342,41 91,39.6639569 91,37.9998779 L91,25.0001221 C91,23.3432004 92.3424683,22 93.995507,22 L127.004493,22 C128.658866,22 130,23.3360431 130,25.0001221 L130,37.9998779 C130,39.6567996 128.657532,41 127.004493,41 L112,41 L112,54 L162,54 L162,41 Z M41,25.0001221 L41,37.9998779 C41,38.5568663 41.4431823,39 41.995507,39 L75.004493,39 C75.5528711,39 76,38.5523199 76,37.9998779 L76,25.0001221 C76,24.4431337 75.5568177,24 75.004493,24 L41.995507,24 C41.4471289,24 41,24.4476801 41,25.0001221 Z M93,25.0001221 L93,37.9998779 C93,38.5568663 93.4431823,39 93.995507,39 L127.004493,39 C127.552871,39 128,38.5523199 128,37.9998779 L128,25.0001221 C128,24.4431337 127.556818,24 127.004493,24 L93.995507,24 C93.4471289,24 93,24.4476801 93,25.0001221 Z M146,25.0001221 L146,37.9998779 C146,38.5568663 146.443182,39 146.995507,39 L180.004493,39 C180.552871,39 181,38.5523199 181,37.9998779 L181,25.0001221 C181,24.4431337 180.556818,24 180.004493,24 L146.995507,24 C146.447129,24 146,24.4476801 146,25.0001221 Z M58.4807692,26.0192308 C61.5172276,26.0192308 63.9807692,28.4827724 63.9807692,31.5192308 C63.9807692,34.5556891 61.5172276,37.0192308 58.4807692,37.0192308 C55.4443109,37.0192308 52.9807692,34.5556891 52.9807692,31.5192308 C52.9807692,28.4827724 55.4443109,26.0192308 58.4807692,26.0192308 Z M110.480769,26.0192308 C113.517228,26.0192308 115.980769,28.4827724 115.980769,31.5192308 C115.980769,34.5556891 113.517228,37.0192308 110.480769,37.0192308 C107.444311,37.0192308 104.980769,34.5556891 104.980769,31.5192308 C104.980769,28.4827724 107.444311,26.0192308 110.480769,26.0192308 Z M163.480769,26.0192308 C166.517228,26.0192308 168.980769,28.4827724 168.980769,31.5192308 C168.980769,34.5556891 166.517228,37.0192308 163.480769,37.0192308 C160.444311,37.0192308 157.980769,34.5556891 157.980769,31.5192308 C157.980769,28.4827724 160.444311,26.0192308 163.480769,26.0192308 Z M62.4328388,30.5845411 C62.526664,30.4898503 62.5735766,30.3635958 62.5735766,30.2294503 C62.5735766,30.0953049 62.526664,29.9611595 62.4328388,29.8664686 L61.7213312,29.156287 C61.627506,29.0615961 61.5024058,29.0063598 61.3694868,29.0063598 C61.2365678,29.0063598 61.1114675,29.0615961 61.0176423,29.156287 L57.8275862,32.3678861 L56.0605453,30.5845411 C55.9667201,30.4898503 55.8416199,30.4346139 55.7087009,30.4346139 C55.5757819,30.4346139 55.4506816,30.4898503 55.3568565,30.5845411 L54.6453488,31.2947228 C54.5515237,31.3894136 54.5046111,31.5235591 54.5046111,31.6577045 C54.5046111,31.7918499 54.5515237,31.9181044 54.6453488,32.0127953 L57.4757418,34.8693035 C57.569567,34.9639944 57.702486,35.0192308 57.8275862,35.0192308 C57.9605052,35.0192308 58.0934242,34.9639944 58.1872494,34.8693035 L62.4328388,30.5845411 Z M114.432839,30.5845411 C114.526664,30.4898503 114.573577,30.3635958 114.573577,30.2294503 C114.573577,30.0953049 114.526664,29.9611595 114.432839,29.8664686 L113.721331,29.156287 C113.627506,29.0615961 113.502406,29.0063598 113.369487,29.0063598 C113.236568,29.0063598 113.111468,29.0615961 113.017642,29.156287 L109.827586,32.3678861 L108.060545,30.5845411 C107.96672,30.4898503 107.84162,30.4346139 107.708701,30.4346139 C107.575782,30.4346139 107.450682,30.4898503 107.356856,30.5845411 L106.645349,31.2947228 C106.551524,31.3894136 106.504611,31.5235591 106.504611,31.6577045 C106.504611,31.7918499 106.551524,31.9181044 106.645349,32.0127953 L109.475742,34.8693035 C109.569567,34.9639944 109.702486,35.0192308 109.827586,35.0192308 C109.960505,35.0192308 110.093424,34.9639944 110.187249,34.8693035 L114.432839,30.5845411 Z M167.432839,30.5845411 C167.526664,30.4898503 167.573577,30.3635958 167.573577,30.2294503 C167.573577,30.0953049 167.526664,29.9611595 167.432839,29.8664686 L166.721331,29.156287 C166.627506,29.0615961 166.502406,29.0063598 166.369487,29.0063598 C166.236568,29.0063598 166.111468,29.0615961 166.017642,29.156287 L162.827586,32.3678861 L161.060545,30.5845411 C160.96672,30.4898503 160.84162,30.4346139 160.708701,30.4346139 C160.575782,30.4346139 160.450682,30.4898503 160.356856,30.5845411 L159.645349,31.2947228 C159.551524,31.3894136 159.504611,31.5235591 159.504611,31.6577045 C159.504611,31.7918499 159.551524,31.9181044 159.645349,32.0127953 L162.475742,34.8693035 C162.569567,34.9639944 162.702486,35.0192308 162.827586,35.0192308 C162.960505,35.0192308 163.093424,34.9639944 163.187249,34.8693035 L167.432839,30.5845411 Z" transform="translate(-25 -22)"/>
            </svg>

            <span translate>There are no closed milestones</span>
        </div>
        <section class="tlp-pane milestone"
            ng-if="planning.thereAreClosedMilestonesLoaded()"
            ng-repeat="milestone in planning.getClosedMilestones() track by milestone.id"
            ng-class="{ collapsed: milestone.collapsed }"
            milestone
        ></section>

        <div class="milestones-loading" ng-if="planning.milestones.loading"></div>
    </div>
</div>

<div backlog-item-selected-bar></div>
